<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>水果选择表单</title>
    <style>
        select {
            width: 200px; 
            height: 120px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <!-- 
              提交后变化说明：
               页面跳转到1_11.html
       URL地址会追加：?fruit=苹果&fruit=葡萄（选中的选项value）
              原因：method="get"会将表单数据拼接在URL中，<select multiple>的多选值会以同名参数重复传递
    -->
    <form method="get" action="1_11.html">
        请选择您需要的水果：<br>
        <!-- 多选下拉列表：name=fruit，开启multiple -->
        <select name="fruit" multiple>
            <option value="苹果">苹果</option>
            <option value="樱桃">樱桃</option>
            <option value="葡萄">葡萄</option>
            <option value="梨">梨</option>
            <option value="西瓜">西瓜</option>
        </select><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>